<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>
<script lang="ts" setup>
import { geoJson } from './map.js';
import * as echarts from 'echarts';
import { EChartsType } from 'echarts/core';
import { onMounted, onUnmounted } from 'vue';
import { cityIconData } from './data.js';
import logo from '@/assets/image/logo.png';
const props = defineProps({
  className: {
    type: String,
    default: 'chart'
  },
  config: {
    type: Object,
    default: () => {}
  },
  id: {
    type: String,
    default: 'chart'
  },
  width: {
    type: String,
    default: '200px'
  },
  height: {
    type: String,
    default: '200px'
  }
});

const geoGpsMap = [109.1162, 34.2004];
const geoCoordMap = {
  江苏: [118.8062, 31.9208],
  内蒙古: [110.3467, 41.4899],
  辽宁: [123.1238, 42.1216],
  陕西: [109.1162, 34.2004],
  甘肃: [103.5901, 36.3043],
  青海: [101.4038, 36.8207],
  新疆: [87.9236, 43.5883],

  河南: [113.4668, 34.6234],
  西藏: [91.091762, 30.037072],
  浙江: [119.5313, 29.8773],
  福建: [119.4543, 25.9222],
  湖南: [113.0823, 28.2568],
  四川: [113.0823, 28.2568],
  云南: [102.9199, 25.4663],
  广东: [113.12244, 23.009505],
  海南: [110.3893, 19.8516]
};

const value = {
  江苏: 10000,
  内蒙古: 10000,
  辽宁: 10000,
  陕西: 10000,
  福建: 10000,
  甘肃: 10000,
  青海: 10000,
  新疆: 10000,
  湖北: 10000,
  浙江: 10000,
  河南: 10000,
  湖南: 10000,
  云南: 10000,
  广东: 10000,
  海南: 10000,
  西藏: 10000
};
const colors = '#f9b207';

const year = ['长春', '长春', '青岛', '青岛', '成都', '成都'];
const mapData = [];

/* 柱子Y名称 */
const categoryData = [];
const barData = [];

for (const key in geoCoordMap) {
  mapData.push({
    year: '陕西',
    name: key,
    value: value[key] / 100,
    value1: value[key] / 100
  });
}

mapData.sort(function sortNumber(a, b) {
  return a.value - b.value;
});
for (let j = 0; j < mapData.length; j++) {
  barData.push(mapData[j].value1);
  categoryData.push(mapData[j].name);
}

echarts.registerMap('china', geoJson);
const convertData = function (data) {
  const res = [];
  for (let i = 0; i < data.length; i++) {
    const geoCoord = geoCoordMap[data[i].name];
    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value)
      });
    }
  }
  return res;
};
const convertToLineData = function (data, gps) {
  const res = [];
  for (let i = 0; i < data.length; i++) {
    const dataItem = data[i];
    const toCoord = geoCoordMap[dataItem.name];
    // debugger;
    const fromCoord = gps; // 郑州
    //  var toCoord = geoGps[Math.random()*3];
    if (fromCoord && toCoord) {
      res.push([
        {
          coord: fromCoord,
          value: dataItem.value
        },
        { coord: toCoord }
      ]);
    }
  }
  return res;
};

const options = {
  tooltip: {
    trigger: 'item',
    formatter(val) {
      // console.log('val==========',val)
    }
  },
  // backgroundColor: '#001540',// 设置背景色
  geo: {
    show: true,
    map: 'china',
    roam: true,
    zoom: 1,
    center: [101.4038, 36.8207],
    label: { emphasis: { show: false } },
    itemStyle: {
      normal: {
        borderColor: 'rgba(147, 235, 248, 1)',
        borderWidth: 1,
        areaColor: {
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.8,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
            }
          ],
          globalCoord: false // 缺省为 false
        },
        shadowColor: 'rgba(128, 217, 248, 1)',
        // shadowColor: 'rgba(255, 255, 255, 1)',
        shadowOffsetX: -2,
        shadowOffsetY: 2,
        shadowBlur: 10
      },
      emphasis: {
        areaColor: '#389BB7',
        borderWidth: 0
      }
    }
  },
  series: [
    // 地图？
    {
      type: 'map',
      map: 'china',
      geoIndex: 0,
      aspectScale: 0.75, // 长宽比
      showLegendSymbol: false, // 存在legend时显示
      label: {
        normal: { show: false },
        emphasis: {
          show: false,
          textStyle: { color: '#fff' }
        }
      },

      roam: true,
      itemStyle: {
        normal: {
          areaColor: '#031525',
          borderColor: '#FFFFFF'
        },
        emphasis: { areaColor: '#2B91B7' }
      },
      animation: false
    },
    // 地图点的动画效果
    {
      //  name: 'Top 5',
      type: 'effectScatter',
      coordinateSystem: 'geo',
      data: convertData(
        mapData
          .sort(function (a, b) {
            return b.value - a.value;
          })
          .slice(0, 20)
      ),
      symbolSize(val) {
        return val[2] / 10;
      },
      showEffectOn: 'render',
      rippleEffect: { brushType: 'stroke' },
      hoverAnimation: true,
      label: {
        normal: {
          formatter: '{b}',
          position: 'right',
          show: true
        }
      },
      itemStyle: {
        normal: {
          color: colors,
          shadowBlur: 10,
          shadowColor: colors
        }
      },
      zlevel: 1
    },
    // 地图线的动画效果
    {
      type: 'lines',
      zlevel: 2,
      effect: {
        show: true,
        period: 4, // 箭头指向速度，值越小速度越快
        trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
        symbol: 'arrow', // 箭头图标
        symbolSize: 3 // 图标大小
      },
      lineStyle: {
        normal: {
          color: colors,
          width: 0.1, // 尾迹线条宽度
          opacity: 0.5, // 尾迹线条透明度
          curveness: 0.3 // 尾迹线条曲直度
        }
      },
      data: convertToLineData(mapData, geoGpsMap)
    },
    {
      type: 'scatter',
      zlevel: 16,
      coordinateSystem: 'geo',
      symbolSize: 30,
      symbol: `image://${logo}`,
      data: cityIconData,
      rippleEffect: {
        period: 4,
        brushType: 'stroke',
        scale: 4
      },
      tooltip: {
        trigger: 'item',
        padding: 0,
        borderColor: 'black',
        background: 'rgba(0,0,0,0.7)',
        textStyle: { fontSize: 20 },
        formatter(val) {
          console.log('val=======', val);
          const tipHtml = `
                     <div class="m-info" style=" opacity: 0.95;background: rgba(25,27,29,1);" >
                         <div class="title" style="padding-left: 12px;
                         padding-top: 10px;
                         padding-bottom: 10px;
                         background: rgba(25,27,29,1);font-size: 20px;color: white;padding-right: 20px">${val.name}</div>
<!--                         <div class="content" style=" padding: 12px; background: rgba(0,2,4,1);">-->
          <!--                               <div style=" font-size: 22px; color: #ff0000;">258944</div>-->
          <!--                        </div>-->
          </div>`;
          return tipHtml;
        }
      }
    }
  ]
};
let chart: EChartsType;
const initChart = () => {
  const chart = echarts.init(document.getElementById(props.id));
  chart.setOption(options);
  return chart;
};

onUnmounted(() => {
  chart && chart.dispose();
});

onMounted(() => {
  chart = initChart();
  window.addEventListener('resize', function () {
    chart && chart.resize();
  });
});
</script>
